<template>
  <el-dropdown
    class="user-dropdown"
    trigger="click"
    @command="$emit('command', $event)"
    @visible-change="$emit('visible-change', $event)"
  >
    <div class="user-info" :class="{ 'is-active': visible }">
      <el-avatar :size="36" class="avatar">
        <el-icon><User /></el-icon>
      </el-avatar>
      <span class="username">{{ username }}</span>
      <el-icon><CaretBottom /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="profile">
          <el-icon><User /></el-icon>个人中心
        </el-dropdown-item>
        <el-dropdown-item divided command="logout">
          <el-icon><SwitchButton /></el-icon>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { User, CaretBottom, SwitchButton } from '@element-plus/icons-vue'

defineProps({
  username: {
    type: String,
    default: '用户',
  },
  visible: {
    type: Boolean,
    default: false,
  },
})

defineEmits(['command', 'visible-change'])
</script>

<style scoped>
.user-dropdown {
  color: inherit !important;
}

.user-dropdown :deep(.el-popper) {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.user-dropdown :deep(.el-dropdown-menu) {
  background-color: #fff !important;
  padding: 5px 0 !important;
  border-radius: 4px !important;
}

.user-dropdown :deep(.el-dropdown-menu__item) {
  display: flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.user-dropdown :deep(.el-dropdown-menu__item:hover) {
  background-color: #f5f7fa !important;
  color: #4086f4 !important;
}

.user-dropdown :deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 8px !important;
  font-size: 16px !important;
}

.user-dropdown :deep(.el-dropdown-menu__item--divided:before) {
  background-color: #ebeef5 !important;
  margin: 0 !important;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
  outline: none !important;
}

.user-info:focus,
.user-info:focus-visible,
.user-info:focus-within,
.user-info.is-active {
  background: rgba(64, 134, 244, 0.08) !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  color: inherit !important;
}

.user-info:hover {
  background: rgba(64, 134, 244, 0.08);
}

.avatar {
  background: #4086f4;
  color: #fff;
  margin-right: 8px;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: #333;
}
</style>
